<!--
 * @Descripttion: 
 * @Date: 2022-02-01 09:24:29
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-02-01 10:30:02
 * @Author: 作者:刘洋(L13831467435@163.com)
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>上传文件</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-if="show">
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" width="auto">
        </el-table-column>
        <el-table-column prop="ip" label="ip地址"> </el-table-column>
        <el-table-column prop="url" label="文件相对路径"> </el-table-column>
        <el-table-column prop="fileUrl" label="文件绝对路径"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="createtime" label="创建时间"> </el-table-column>
        <el-table-column prop="fileUrl" label="文件">
          <!-- 图片的显示 -->
          <template scope="scope" width="auto">
            <el-popover placement="right" title="" trigger="hover" v-if="scope.row.type==1">
              <img slot="reference" :src="scope.row.url" :alt="scope.row.url"
                style="max-height: 300px; max-width: 300px" />
              <img :src="scope.row.url" style="height: auto; width: 500px" />

            </el-popover>
            <video v-else style="height: 300px; width: 100%" slot="reference" :src="scope.row.url" controls="true"
              controlslist="nodownload"></video>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="fileUrl" label="视频" width="300px">

        <template scope="scope">
          <video style="height: 300px; width: 300px" slot="reference" :src="scope.row.fileUrl" controls="true"
            controlslist="nodownload"></video>
        </template>
      </el-table-column> -->

        <el-table-column prop="fileUrl" label="操作" width="auto">
          <template scope="scope">
            <p style="color: red" @click="del(scope.row)">删除</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <div v-else>
      <el-input v-model="password" placeholder="请输入密码"></el-input>
      <button type="submit" @click="sub">确定</button>
    </div>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        http: 'http://39.107.113.49:3000',
        // http: 'http://localhost:3000',
        list: [],
        page: 1,
        total: 0,
        show: false,
        password: ''
      };
    },
    created() {
      if (localStorage.getItem("password") && localStorage.getItem("password") == '123') {
        this.show = true
        this.getlist();
      }

    },
    methods: {
      async getlist() {
        let that = this;
        axios
          .post(this.http + "/select", {
            page: that.page,
          })
          .then(async response => {
            that.list = response.data.data.list;
            that.total = response.data.data.count;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      handleCurrentChange(page) {
        this.page = page;
        this.getlist();
      },
      del(row) {
        console.log(row);
        let that = this;
        axios
          .post(this.http + "/del", {
            id: row.id,
          })
          .then(function (response) {
            console.log(response);
            if (response.data.code == 1) {
              that.$message.success(response.data.msg);
              that.getlist();
            } else {
              that.$message.error(response.data.msg);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      sub() {
        if (!this.password || this.password != '123') {
          return this.$message.error('密码错误')
        } else {
          localStorage.setItem("password", "123");
          this.show = true
          this.getlist();
        }
      }
    },
  });
</script>

</html>